<template>
    <div class="white-box">
        <title-more title="基本信息" />
        <el-form ref="ruleRef" :model="ruleForm" :rules="ruleCheck" label-width="120px">
            <el-form-item label="登录账号" style="margin-bottom:10px">
                <span>{{ info.mobile }}</span>
            </el-form-item>
            <el-form-item label="店铺编号" style="margin-bottom:10px">
                <span>{{ info.tenant_id }}</span>
            </el-form-item>
            <el-form-item label="店铺域名" style="margin-bottom:10px">
                    <span>{{ info.tenant_id + '.huashushop.com' }}</span>
                </el-form-item>
            <el-form-item label="IP地址" style="margin-bottom:10px">
                    <span>122.9.144.199</span>
                </el-form-item>
            <el-form-item label="店铺名称" prop="shop_name">
                <el-input v-model.trim="ruleForm.shop_name" clearable placeholder="请输入店铺名称" />
            </el-form-item>
            <el-form-item label="店铺Logo" prop="img_paths">
                <div class="img-box flexs-center" @click.stop="showImg = true" v-if="ruleForm.img_paths == ''">
                    <el-icon color="#999" size="26px">
                        <UploadFilled />
                    </el-icon>
                </div>
                <div class="img-selects" v-else>
                    <el-image
                        class="img-selects__pic"
                        :src="proxy.imgUrl + ruleForm.img_paths + '!img_400'"
                        :preview-src-list="srcList"
                        fit="cover"
                    />
                    <div class="img-del" @click.stop="delImg">
                        <el-icon size="14px" color="#fff"><CloseBold /></el-icon>
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="负责人姓名" prop="shop_person">
                <el-input v-model.trim="ruleForm.shop_person" clearable placeholder="请输入店铺负责人姓名" />
            </el-form-item>
            <el-form-item label="负责人电话" prop="shop_person_tel" required>
                <el-input
                    v-model.trim="ruleForm.shop_person_tel"
                    maxlength="11"
                    oninput="value=value.replace(/[^\d]/g,'')"
                    clearable
                    placeholder="请输入负责人电话"
                />
            </el-form-item>
            <el-form-item label="所在地区" prop="area_code">
                <el-cascader ref="cascaderRef" v-model="ruleForm.area_code" :props="props" :options="allArea" clearable placeholder="请选择省市区" />
            </el-form-item>
            <el-form-item label="详细地址" prop="address">
                <el-input v-model.trim="ruleForm.address" type="textarea" clearable :rows="3" placeholder="请输入详细地址" />
            </el-form-item>
            <el-form-item label="短信签名" prop="short_sign">
                <el-input v-model.trim="ruleForm.short_sign" clearable placeholder="请输入短信签名" />
            </el-form-item>
            <el-form-item label="店铺简介" prop="shop_text">
                <el-input v-model.trim="ruleForm.shop_text" type="textarea" :rows="6" clearable placeholder="请输入店铺简介" />
            </el-form-item>
        </el-form>
    </div>

    <div class="foot-btn flexs-center">
        <el-button type="primary" :loading="form_loading" @click="submitForm(ruleRef)">确认保存</el-button>
    </div>

    <!-- 图片库 -->
    <picture-library :show="showImg" :select_multiple="false" @close="showImg = false" @select="selectImg"> </picture-library>

    <go-back />
</template>

<script setup>
import { getCurrentInstance, ref, onMounted, reactive, computed } from "vue"
import { useBaseStore } from "@store/base"
import { UploadFilled, CloseBold } from "@element-plus/icons-vue"
import GoBack from "@components/GoBack.vue"
import TitleMore from "@components/title-more.vue"
import PictureLibrary from "@components/PictureLibrary.vue"

const { proxy } = getCurrentInstance()

const store = useBaseStore() // 获取用户信息
const info = computed(() => {
    return store.userinfo
})

onMounted(() => {
    getArea()
    getDetail()
})

function getDetail() {
    proxy.$axios
        .get("enterprise/info")
        .then((res) => {
            if (res.data.code == 0) {
                let result = res.data.data
                ruleForm.shop_name = result.title
                ruleForm.shop_person = result.contact
                ruleForm.shop_person_tel = result.phone
                ruleForm.img_paths = result.logo
                ruleForm.address = result.house
                ruleForm.short_sign = result.sms_sign
                ruleForm.shop_text = result.intro
                ruleForm.area_code = [result.province_code, result.city_code, result.district_code].map(String)
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => {})
}

/**
 * 编辑
 * @param {Boolean} form_loading 弹窗按钮状态
 * @property {Array} ruleRef 表单规则
 * @property {Object} ruleForm  表单字段
 * @property {Object} ruleCheck  表单提示
 */
const form_loading = ref(false)
const ruleRef = ref(null)
const ruleForm = reactive({
    shop_name: "",
    shop_person: "",
    shop_person_tel: "",
    img_paths: "",
    shop_text: "",
    short_sign: "",
    area_code: [],
    address: "",
})
const ruleCheck = reactive({
    shop_name: [{ required: true, message: "请输入店铺名称", trigger: "blur" }],
    shop_person: [{ required: true, message: "请输入店铺负责人姓名", trigger: "blur" }],
    img_paths: [{ required: true, message: "请选择店铺Logo", trigger: "blur" }],
    shop_person_tel: [{ required: true, validator: proxy.$util.validPhone, trigger: "blur" }],
    short_sign: [{ required: true, message: "请输入短信签名", trigger: "blur" }],
    area_code: [{ type: "array", required: true, message: "请选择省市区", trigger: "change" }],
    address: [{ required: true, message: "请输入详细地址", trigger: "blur" }],
})
// 确认
const submitForm = (formEl) => {
    if (!formEl) return
    formEl.validate((valid, fields) => {
        if (valid) {
            let areas = cascaderRef.value.getCheckedNodes(false) // 获取级联选择的node
            let data = {
                title: ruleForm.shop_name,
                contact: ruleForm.shop_person,
                logo: ruleForm.img_paths,
                phone: ruleForm.shop_person_tel,
                province_code: ruleForm.area_code ? ruleForm.area_code[0] : "",
                city_code: ruleForm.area_code ? ruleForm.area_code[1] : "",
                district_code: ruleForm.area_code ? ruleForm.area_code[2] : "",
                province: areas[0].pathLabels[0],
                city: areas[0].pathLabels[1],
                district: areas[0].pathLabels[2],
                house: ruleForm.address,
                sms_sign: ruleForm.short_sign,
                intro: ruleForm.shop_text,
            }
            form_loading.value = true
            proxy.$axios
                .post("enterprise/update", data)
                .then((res) => {
                    form_loading.value = false
                    if (res.data.code == 0) {
                        proxy.$message({ message: "保存成功！", type: "success" })
                        getDetail()
                    } else {
                        proxy.$message({message:res.data.msg,type:"error"})
                    }
                })
                .catch((err) => {
                    form_loading.value = false
                })
        }
    })
}
// const resetForm = (formEl) => {
//     if (!formEl) return
//     formEl.resetFields()
// }

/**
 * 选择省市区
 * @param {Array} allArea 存放省市区数组
 * @param {Object} cascaderRef 容器ref
 * @param {Function} getArea 请求json
 */
const allArea = ref([])
const cascaderRef = ref(null)
const props = {
    label: "name",
    value: "adcode",
    children: "districts",
}
function getArea() {
    proxy.$axios
        .get("gaode-area.json")
        .then((res) => {
            let result = res.data.districts
            allArea.value = result[0].districts
        })
        .catch((err) => {})
}

/**
 * 添加图片
 * @property {Boolean} showImg 显示图片库
 * @property {String} img_paths 图片地址
 * @property {Function} selectImg 选择图片
 */
const showImg = ref(false)
const srcList = ref([])
const selectImg = (val) => {
    showImg.value = false
    ruleForm.img_paths = val[0].photo
    srcList.value.push(proxy.imgUrl + val[0].photo)
}
const delImg = () => {
    ruleForm.img_paths = ""
    srcList.value = []
}
</script>
<script>
export default {
    name: "ShopInfo",
}
</script>

<style lang="less" scoped></style>
